19. CSS Frameworks

Explanation: CSS Frameworks pre-written CSS code hote hain jo responsive aur fast development ke liye use hote hain. Popular frameworks: Bootstrap, Foundation, Tailwind CSS, Bulma.

I. Bootstrap Example

Explanation: Bootstrap ek popular framework hai jisme classes ka use karke responsive layout aur components banaye jaate hain.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <div class="container text-center mt-4"> <h2 class="text-primary">Hello Bootstrap</h2> <button class="btn btn-success mt-2">Click Me</button> </div> Run Code

II. Tailwind CSS Example

Explanation: Tailwind utility-first framework hai jisme aap directly class names se styling karte ho.

<script src="https://cdn.tailwindcss.com"></script> <div class="text-center mt-5"> <h2 class="text-3xl text-blue-600 font-bold">Hello Tailwind</h2> <button class="bg-green-500 text-white px-4 py-2 mt-3 rounded-lg hover:bg-green-600">Click Me</button> </div> Run Code

III. Bulma Example

Explanation: Bulma ek modern CSS framework hai jo Flexbox based hota hai.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"> <div class="section has-text-centered"> <h2 class="title is-3 has-text-info">Hello Bulma</h2> <button class="button is-success is-medium">Click Me</button> </div> Run Code

IV. Foundation (Basic)

Explanation: Foundation framework responsive design ke liye powerful hai, lekin ab utna popular nahi raha.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css"> <div class="grid-container text-center"> <h2 class="primary">Hello Foundation</h2> <button class="button success">Click Me</button> </div> Run Code